<!-- in-enum 枚举 -->
<template>
    <el-form-item class="c-item" :label="name" :rules="required ? {required: true} : rules ">
        <el-radio-group v-if="jtype === '1'" :model-value="modelValue" @change="onChange">
            <el-radio :label="def" value="" v-if="def"></el-radio>
            <el-radio v-for="j in jvList" :key="j.key" :label="j.value" :value="j.key"></el-radio>
        </el-radio-group>
        <el-radio-group v-if="jtype === '2'" :model-value="modelValue" @change="onChange" class="s-radio-text">
            <el-radio :label="def" value="" v-if="def"></el-radio>
            <el-radio v-for="j in jvList" :key="j.key" :label="j.value" :value="j.key"></el-radio>
        </el-radio-group>
        <el-radio-group v-if="jtype === '3'" :model-value="modelValue" @change="onChange" size="default">
            <el-radio-button :label="def" value="" v-if="def"></el-radio-button>
            <el-radio-button v-for="j in jvList" :key="j.key" :label="j.value" :value="j.key"></el-radio-button>
        </el-radio-group>
        <el-select v-if="jtype === '4'" :model-value="modelValue" @change="onChange" style="width: 100%;">
            <el-option :label="def" v-if="def" value=""></el-option>
            <el-option v-for="j in jvList" :key="j.key" :label="j.value" :value="j.key"></el-option>
        </el-select>
        <!-- 备注信息 -->
        <p class="c-remark" v-if="remark" style="width: 100%;">{{remark}}</p>
    </el-form-item>
</template>

<script setup name="in-enum">
import {getCurrentInstance, onMounted, ref, watch} from "vue";
const { proxy } = getCurrentInstance();

// 形参 
defineProps({
    // 类型
    type: {},
    // 标题 
    name: {},
    // 绑定值 
    modelValue: {},
    // 提示文字 
    placeholder: {},
    // 备注文字
    remark: {}, 
    // 是否禁用 
    disabled: {},
    // type=enum时，值列表    -- 形如：{1: '正常[green]', 2: '禁用[red]'}  
    jv: {default: ''},
    // type=enum时，具体的展示类型 -- 1=单选框，2=单选文字，3=单选按钮，4=单选下拉框
    jtype: {default: '1'},
    // type=enum时，增加的默认项文字 
    def: {},
    // 表单校验 
    rules: {},
    required: {
        type: Boolean
    }
});

// 解析的枚举列表 
const jvList = ref([]);

// 解析枚举 
const parseJv = function(jv) {
    jv = jv || proxy.jv;
    jvList.value = [];
    for(let key in jv) {
        let value = jv[key];
        let color = '';
        // 
        if(value.indexOf('[') !== -1 && value.endsWith(']')) {
            let index = value.indexOf('[');
            color = value.substring(index + 1, value.length - 1);
            value = value.substring(0, index);
            // console.log(color + ' --- ' + value);
        }
        // 
        if(isNaN(key) === false) {
            key = parseInt(key);
        }
        // 
        jvList.value.push({
            key: key,
            value: value,
            color: color
        })
    }
};

// input值发生变化时触发
const onChange = function($event) {
    proxy.$emit('update:modelValue', $event);
};

// 初始化
onMounted(function (){
    parseJv();
});
//
// 二次变动时重新解析 
watch(() => proxy.jv, (oldVal, newVal) => {
    if(JSON.stringify(oldVal) !== JSON.stringify(newVal)) {
        parseJv();
    }
})


</script>

<style scoped>

</style>
